<template>
  <div class="zj-shop-payment">
    <!--  头部  -->
    <ZJHeader class="payment-header">
      <template #left>
        <div class="header-left" @click="$router.back()">
          <van-icon class="left-icon" name="arrow-left"/>
          <span>确认订单</span>
        </div>
      </template>
    </ZJHeader>
    <!--  地址  -->
    <div class="payment-main">
      <ZJScrollView
          ref="shopCarScrollRef"
          wrapperInfo=".payment-main .scroll-wrapper"
          :wrapperConfig="{click: true, bindToWrapper: true}"
      >
        <template #content>
          <template v-if="hasDefaultAddress">
            <div class="payment-address card-normal" @click="shopCarModule.setIsShowAddressAction(true)">
              <div class="address-left">{{ shopCarModule.currentAddress.receiverName.substring(0, 1) }}</div>
              <div class="address-main">
                <p class="main-address">
                  {{ wholeAddress }}
                </p>
                <p class="main-user">
                  <span class="name">{{ shopCarModule.currentAddress.receiverName }}</span>
                  <span class="mobile">{{ shopCarModule.currentAddress.receiverMobile }}</span>
                </p>
              </div>
              <van-icon name="arrow"/>
            </div>
          </template>
          <template v-else @click="shopCarModule.setIsShowAddressAction(true)">
            <div class="no-address card-normal">
              <p class="message">先填写地址，再确认订单信息</p>
              <p class="go">
                <span class="word">现在填写</span>
                <van-icon color="icon" name="arrow"/>
              </p>
            </div>
          </template>
          <div class="payment-goods card-normal">
            <h3 class="shop-name">乐享家私城自营店</h3>
            <template v-for="item in shopCarModule.shopCarSelectGoods" :key="item.id">
              <div class="goods-info">
                <div class="info-img">
                  <img :src="item.subImages" alt="goods_img">
                </div>
                <div class="info-word">
                  <p class="name">{{ item.name }}</p>
                </div>
                <p class="info-price">
                  <span class="price">￥{{ item.price }}</span>
                  <span class="count">×{{ item.quantity }}</span>
                </p>
              </div>
            </template>
            <p class="total-price">
              <span class="tip">总计：</span>
              <span class="price">￥{{ totalPrice.toFixed(2) }}</span>
            </p>
          </div>
          <!--  支付按钮  -->
          <div class="payment-way card-normal" style="margin: 0;">
            <van-radio-group v-model="whichPayWay">
              <div class="item" @click="whichPayWay = '1'">
                <p class="left">
                  <van-icon class="wechat-icon" name="wechat"/>
                  <span>微信支付</span>
                </p>
                <van-radio name="1"/>
              </div>
              <div class="item" @click="whichPayWay = '2'">
                <p class="left">
                  <van-icon class="alipay-icon" name="alipay"/>
                  <span>支付宝支付</span>
                </p>
                <van-radio name="2"/>
              </div>
            </van-radio-group>
          </div>
          <div class="block" style="height: 60px;"></div>
        </template>
      </ZJScrollView>
    </div>
    <!--  提交订单  -->
    <van-submit-bar
        class="submit-order-bar"
        button-text="提交订单"
        @submit="handleOrderSubmit"
    />
    <!--  地址选择  -->
    <MyAddress :isFromShopCar="true" v-if="shopCarModule.isShowAddress"/>
  </div>
</template>

<script setup lang="ts">
import {computed, onBeforeUnmount, onMounted, ref} from "vue";

import MyAddress from "@/views/ZJMy/MyAddress/MyAddress.vue";
import ZJHeader from "@/components/ZJHeader/ZJHeader.vue";
import useShopCarModule from "@/store/shopCarModule";
import {getWholeAddress, handleToPage} from "@/utils";
import useMyModule from "@/store/myModule";
import usePayModule from "@/store/payModule";
import ZJScrollView from "@/components/ZJScrollView/ZJScrollView.vue";

const myModule = useMyModule()
const payModule = usePayModule()
const shopCarModule = useShopCarModule()
const shopCarScrollRef = ref<InstanceType<typeof ZJScrollView>>()
const whichPayWay = ref("1")
const wholeAddress = computed(() => {
  const {receiverProvince, receiverCity, receiverDistrict, receiverAddress} = shopCarModule.currentAddress
  return getWholeAddress(receiverProvince, receiverCity, receiverDistrict, receiverAddress)
})

const totalPrice = computed(() => {
  return shopCarModule.shopCarSelectGoods.reduce((prev, item) => {
    return prev + item.price * item.quantity
  }, 0)
})

const handleOrderSubmit = async () => {
  const addressId = shopCarModule.currentAddress.id
  const ids = shopCarModule.shopCarSelectGoods.map(item => item.id)
  const paymentType = whichPayWay.value
  if (addressId) {
    const data: any = await shopCarModule.createOrderByShoppingAction({
      data: {
        addressId,
        ids,
        paymentType
      }
    })
    if (data) {
      const scriptPage = await payModule.createPayAction({
        orderNo: data.orderNo,
        price: data.price,
        paymentType: parseInt(paymentType)
      })
      if (scriptPage) {
        handleToPage(scriptPage)
      }
    }
  }
}
const hasDefaultAddress = ref(false)
onMounted(async () => {
  await myModule.setAddressListAction({
    needNavigate: "/shop-car/payment"
  })
  if (myModule.defaultAddress?.id) {
    shopCarModule.setCurrentAddressAction(myModule.defaultAddress)
    hasDefaultAddress.value = true
  }
  console.log(shopCarScrollRef.value)
  shopCarScrollRef.value.bs.refresh()
})
onBeforeUnmount(() => {
  shopCarModule.setIsShowAddressAction(false)
})
</script>

<style scoped lang="less">
@import "src/assets/css/variable";
@import "src/assets/css/mixins";

.zj-shop-payment {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: @theme-grey-color;
  z-index: 889;

  .payment-header {
    background-color: @theme-grey-color;
    color: #000;

    .header-left {
      display: flex;
      align-items: center;

      .left-icon {
        font-size: 18px;
      }
    }
  }

  .payment-main {
    height: calc(100% - 50px - 60px);
    overflow: hidden;
  }

  .payment-address {
    display: flex;
    align-items: center;
    background-color: #fff;

    .address-left {
      display: block;
      text-align: center;
      line-height: 30px;
      width: 30px;
      height: 30px;
      background-color: @theme-color;
      border-radius: 50%;
      color: #fff;
      margin-right: 10px;
    }

    .address-main {
      flex: 1;
      overflow: hidden;

      .main-address {
        font-size: 18px;
        font-weight: 600;
        line-height: 1.5;
        margin-bottom: 8px;
        .clamp(2)
      }

      .main-user {
        color: #666;

        .name {
          margin-right: 8px;
        }

        .mobile {
          color: #999;
        }
      }
    }
  }

  .no-address {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .message {
      font-size: 16px;
      font-weight: 600;
    }

    .go {
      .word {
        color: #C81C22;
      }

      .icon {
        font-weight: 600;
      }
    }
  }

  .payment-goods {
    background-color: #fff;

    .shop-name {
      margin-bottom: 8px;
      font-size: 20px;
    }

    .goods-info {
      display: flex;

      & + .goods-info {
        margin-top: 20px;
      }

      .info-img {
        width: 90px;
        height: 90px;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          border-radius: 8px;
        }
      }

      .info-word {
        margin-left: 8px;
        flex: 1;
        overflow: hidden;

        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
          margin-bottom: 8px;
        }

        .subtitle {
          color: #999;
          font-size: 14px;
        }
      }

      .info-price {
        margin-left: 8px;
        display: flex;
        flex-direction: column;

        .price {
          font-weight: 600;
          font-size: 16px;
          color: #C81C22;
          margin-bottom: 6px;
        }

        .count {
          color: #999;
          font-size: 14px;
          text-align: right;
        }
      }
    }

    .goods-stepper {
      text-align: right;
    }

    .total-price {
      text-align: right;

      .tip {
        font-size: 14px;
        font-weight: 600;
      }

      .price {
        color: #C81C22;
        font-weight: 600;
        font-size: 16px;
      }
    }
  }

  .payment-way {
    .item {
      display: flex;
      align-items: center;
      padding: 8px 0;
      justify-content: space-between;

      &:last-of-type {
        border-top: 1px solid #f2f2f2;
      }

      .left {
        display: flex;
        align-items: center;
      }

      .wechat-icon {
        color: #67c23a;
        font-size: 24px;
        margin-right: 8px;
      }

      .alipay-icon {
        color: #1e9fff;
        font-size: 24px;
        margin-right: 8px;
      }
    }
  }

  .submit-order-bar {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
